"use strict";
import * as React from 'react';
const { View, ScrollView, TouchableOpacity, Image } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import Line from "../../component/Line";
import MyText from "../../component/MyText";
import Avatar from "../../component/Avatar";
import MyIcon from "../../component/icon";
import DynamicItem from "../../component/DynamicItem";
import { groupStyles } from "../../assets/styles/groups";
import NavBackButton from "../../component/BackButton";
class Page extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.goToDynamicDetail = (dynamicItem) => {
            this.props.dispatch({
                type: 'post/detail',
                payload: {
                    dynamicItem,
                    postType: 'group'
                }
            });
        };
        this.renderItem = ({ item }) => {
            const avatarProps = {
                borderWidth: 1,
                borderColor: '#fff',
                size: 35,
            };
            return (<View style={[commonStyles.flexColumn, groupStyles.listItem]}>
                <View style={commonStyles.flexRow}>
                    <Avatar source={item.avatar} circle={false} size={autoSize(85)}/>
                    <View style={[commonStyles.flexColumn, commonStyles.flex1, groupStyles.content]}>
                        <MyText numberOfLines={1}>{item.title}</MyText>
                        <MyText numberOfLines={2}>{item.sub}</MyText>
                    </View>
                </View>
                <View>
                    <View style={commonStyles.flexRow}>
                        <View style={[commonStyles.flexRow, commonStyles.flex1, groupStyles.content]}>
                            <Avatar {...avatarProps} content={`+${item.member_count}`} style={{ zIndex: 10 }}/>
                            <Avatar {...avatarProps} style={[groupStyles.member, { zIndex: 8, backgroundColor: '#DC6451' }]}/>
                            <Avatar {...avatarProps} source={item.avatar} style={[groupStyles.member, { zIndex: 6 }]}/>
                            <Avatar {...avatarProps} source={item.avatar} style={[groupStyles.member, { zIndex: 4 }]}/>
                            <Avatar {...avatarProps} source={item.avatar} style={[groupStyles.member, { zIndex: 0 }]}/>
                        </View>
                        <TouchableOpacity>
                            <View style={[commonStyles.flexRow, groupStyles.joinBtn, item.is_join ? groupStyles.isJoin : null]}>
                                <MyIcon name={!item.is_join ? 'icon-jia1' : 'icon-gou'} color={item.is_join ? '#999' : '#000'} size={15}/>
                                <MyText fontSize={15} style={{ marginLeft: 5 }} color={item.is_join ? '#999' : '#000'}>{item.is_join ? '已加入' : '加入'}</MyText>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>);
        };
        this.onPraise = (type, item) => {
            this.props.dispatch({
                type: 'post/praise',
                payload: {
                    type,
                    typeId: item.id,
                    item,
                    from: 'group'
                }
            });
        };
        this.renderDynamicItem = (item, index) => {
            return <DynamicItem item={item} key={index} onLikePress={this.onPraise.bind(this, 'post', item)} onCommentPress={_ => this.goToDynamicDetail(item)} onContentPress={_ => this.goToDynamicDetail(item)} onUserInfoPress={company => Actions.companyInfo({ company })}/>;
        };
    }
    componentDidMount() {
        this.props.dispatch({
            type: 'group/fetchGroupPosts',
            payload: {
                pi: 1,
                ps: 10,
                groupId: this.props.groupItem.id
            }
        });
    }
    render() {
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} rightButton={{
            title: '详情',
            tintColor: '#fff',
            handler: Actions.groupInfoDetail.bind(this, {
                title: this.props.title,
                group: this.props.groupItem
            })
        }} title={{ title: this.props.title, tintColor: '#fff' }}/>
                <TouchableOpacity style={[commonStyles.listItem, { padding: 10, backgroundColor: '#fff' }]} onPress={Actions.newPostings.bind(this, {
            postType: 'groups',
            tip: '发表到群组',
            item: this.props.groupItem
        })}>
                    <Image source={require('../../assets/image/avatar_six.png')} width={autoSize(35)} height={autoSize(35)}/>
                    <MyText style={{ color: '#999', fontSize: 16, marginLeft: 10 }}>对这个群组说些话</MyText>
                </TouchableOpacity>
                <View style={commonStyles.flex1}>
                    <ScrollView>

                        {this.props.group.postList.map(this.renderDynamicItem)}

                        
                        <Line />

                        <View style={[commonStyles.centerVH, { backgroundColor: '#F5F4F4', padding: 10 }]}>
                            <MyText>赞</MyText>
                        </View>

                    </ScrollView>
                </View>
            </View>);
    }
}
export default connect(({ auth, group, post }) => ({ auth, group, post }))(Page);
